<template>
  <div class="search wrap">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @input="onSearch"
        @cancel="onCancel"
      />
    </form>
    <h3 class="tit" v-show="list.length > 0">热销/新品/其他</h3>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <ul class="search_content">
        <li v-for="item in list" :key="item.id" @click="toDetails(item.id)">
          <div class="li_left">
            <img :src="item.img" alt="" />
            <div class="li_center">
              <h3>{{ item.name }}</h3>
              <p>￥{{ item.price }}</p>
              <p>月售{{ item.num }}</p>
              <p class="desc">{{ item.describe }}</p>
            </div>
          </div>
          <div class="li_right">
            <div>
              <b>{{ item.score }}</b>
              <b>分</b>
            </div>
            <van-button type="warning" size="small" color="#FAAF00"
              >想吃</van-button
            >
          </div>
        </li>
      </ul>
    </van-pull-refresh>
    <!-- <div class="btn">查看全部12574部数据</div> -->

    <!-- 搜索记录 -->
    <van-cell
      :title="item"
      icon="clock-o"
      v-for="(item, index) in recordList"
      :key="index"
      v-show="!list.length > 0"
      @click="getVal(item)"
    >
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-icon name="cross" @click.stop="delRecord(index) " />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  // 定义属性
  name: "Search",
  data() {
    return {
      value: "",
      list: [],
      isLoading: false,
      pullRefresh: false,
      recordList: [],
    };
  },
  methods: {
    getVal(item){
      // console.log(11);
      this.value = item
      this.getSearch()
    },
    onSearch(val) {
      // console.log(val);
      if (val) {
        this.getSearch();
      } else {
        this.list = [];
      }
    },
    toDetails(id) {
      this.$router.push({ path: "/details", query: { id: id } });
    },
    onCancel() {
      // console.log("取消");
    },
    // 请求搜索接口
    getSearch() {
      this.axios
        .get("http://49.235.71.189:5334/namelike?", {
          params: { name: this.value },
        })
        .then((res) => {
          console.log(res.data);
          if (res.data.length > 0) {
            this.list = res.data;
            // 搜索成功保存历史记录
            console.log(this.recordList);
            if (localStorage.getItem("movieRecord")) {
              this.recordList = JSON.parse(localStorage.getItem("movieRecord"));
            }
            this.recordList.unshift(this.value);
            this.recordList = new Set(this.recordList);
            this.recordList = [...this.recordList];
            localStorage.setItem(
              "movieRecord",
              JSON.stringify(this.recordList)
            );
          } else {
            this.$toast.fail("没有搜索到");
            this.list = [];
          }
          // 如果有下拉刷新，才提示
          if (this.pullRefresh) {
            setTimeout(() => {
              this.$toast.success("刷新成功");
              this.isLoading = false;
              this.pullRefresh = false;
            }, 1000);
          }
        });
    },
    // 下拉刷新
    onRefresh() {
      this.pullRefresh = true;
      this.getSearch();
    },
    // 删除记录
    delRecord(index) {
      // console.log("删除记录", index);
      this.recordList.splice(index, 1);
      localStorage.setItem("movieRecord", JSON.stringify(this.recordList));
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 实例化完成之后，渲染搜索记录列表
    if (localStorage.getItem("movieRecord")) {
      this.recordList = JSON.parse(localStorage.getItem("movieRecord"));
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.search {
  .tit {
    font-size: 15px;
    color: #999999;
    font-weight: 500;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 10px;
  }
  .search_content {
    padding-left: 10px;
    border-bottom: 1px solid #e6e6e6;
    li {
      display: flex;
      padding: 20px;
      padding-left: 0;
      justify-content: space-between;
      border-bottom: 1px solid #e6e6e6;
      &:last-of-type {
        border-bottom: none;
      }
      img {
        width: 64px;
        height: 90px;
      }
      .li_left {
        display: flex;
      }
      .li_center {
        margin-left: 10px;
        h3 {
          font-size: 17px;
          color: #222222;
          margin-top: 2px;
        }
        p {
          font-size: 13px;
          color: #666666;
          margin-top: 5px;
        }
        p.desc{
          display: block;
          width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      ::v-deep .li_right {
        display: flex;
        flex-direction: column;
        div {
          margin-bottom: 10px;
        }
        b {
          font-weight: normal;
          font-size: 16px;
          color: #ffaa00;
          &:last-of-type {
            font-size: 12px;
          }
        }
        .van-button {
          border-radius: 5px;
        }
        .van-button--small {
          height: 27px;
        }
      }
    }
  }
  .btn {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 15px;
    color: #ef4328;
  }
}
</style>